<template>
	<div class="calculator">
		<div class="result" style="grid-area: result;">
			{{equation}}
		</div>

		<button style="grid-area: AC;" @click="clear">AC</button>
		<button style="grid-area: plus-minus;" @click="calculateToggle">±</button>
		<button style="grid-area: percent;" @click="calculatePercentage">%</button>
		<button style="grid-area: add;" @click="append('+')">+</button>
		<button style="grid-area: subtract;" @click="append('-')">-</button>
		<button style="grid-area: multiply;" @click="append('×')">×</button>
		<button style="grid-area: divide;" @click="append('÷')">÷</button>
		<button style="grid-area: equal;" @click="calculate">=</button>

		<button style="grid-area: number-1;" @click="append('1')">1</button>
		<button style="grid-area: number-2;" @click="append('2')">2</button>
		<button style="grid-area: number-3;" @click="append('3')">3</button>
		<button style="grid-area: number-4;" @click="append('4')">4</button>
		<button style="grid-area: number-5;" @click="append('5')">5</button>
		<button style="grid-area: number-6;" @click="append('6')">6</button>
		<button style="grid-area: number-7;" @click="append('7')">7</button>
		<button style="grid-area: number-8;" @click="append('8')">8</button>
		<button style="grid-area: number-9;" @click="append('9')">9</button>
		<button style="grid-area: number-0;" @click="append('0')">0</button>

		<button style="grid-area: dot;" @click="append('.')">.</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				equation: "0",
				// 判断是否已输入小数位，防止输入多个小数点
				isDecimalAdded: false,
				// 判断是否已点击运算，防止连续输入多个运算符
				isOperatorAdded: false,
				// 判断是否已开始输入数字
				isStarted: false,
				// 预存结果,用于计算结果后，再次输入数字时出现拼接数字的现象
				result: "0",
			}
		},
		onLoad() {

		},
		methods: {
			// 判断是否加、减、乘、除
			isOperator(character) {
				return ["+", "-", "×", "÷"].indexOf(character) > -1;
			},
			// 点击 运算符、数字、小数点 按钮时
			append(character) {
				if (this.equation === "0" && !this.isOperator(character)) {
					if (character === ".") {
						this.equation += "" + character;
						this.isDecimalAdded = true;
					} else {
						this.equation = "" + character;
					}
					this.isStarted = true;
					return;
				}

				if (!this.isOperator(character)) {
					if (!(this.result === "0")) {
						this.equation = character;
						this.result = "0";
						return;
					}
					if (character === "." && this.isDecimalAdded) {
						return;
					}
					if (character === ".") {
						this.isDecimalAdded = true;
						this.isOperatorAdded = true;
					} else {
						this.isOperatorAdded = false;
					}
					this.equation += "" + character;
				}

				if (this.isOperator(character) && !this.isOperatorAdded) {
					this.equation += "" + character;
					this.isDecimalAdded = false;
					this.isOperatorAdded = true;
				}
			},
			// 点击 = 按钮时
			calculate() {
				let result = this.equation
					.replace(new RegExp("×", "g"), "*")
					.replace(new RegExp("÷", "g"), "/");
				this.equation = parseFloat(eval(result).toFixed(9)).toString();
				this.result = this.equation;
				this.isDecimalAdded = false;
				this.isOperatorAdded = false;
			},
			// 点击 正负号 按钮时
			calculateToggle() {
				if (this.isOperatorAdded || !this.isStarted) {
					return;
				}
				this.equation = this.equation + "* -1";
				this.calculate();
			},
			// 点击 % 按钮时
			calculatePercentage() {
				if (this.isOperatorAdded || !this.isStarted) {
					return;
				}
				this.equation = this.equation + "* 0.01";
				this.calculate();
			},
			// 点击 AC 按钮时
			clear() {
				this.equation = "0";
				this.isDecimalAdded = false;
				this.isOperatorAdded = false;
				this.isStarted = false;
			},
		}
	}
</script>

<style>
	@import url("index.css");
</style>
